<template>
  <div class="publicBox " id="shoperCss"> 

<div class="boxItem " id="publicSearch">

<el-form ref="form" :inline="true"  class="demo-form-inline"> 
  <el-form-item >
  </el-form-item>
</el-form>
          </div>
    <!-- <div class="publicBoxTop">
    </div>      -->
          <public-table  
          :columnDefs="columnDefs" 
          @changePage="changePage"
          :tableData="tableData" 
          :total="total"
          :btn="[]"
          :order=true
          >
         <el-table-column
         label="图片"
         slot="input2"
         width="409"
        class="tableBox">
           <template slot-scope="scope" >
             <div class="imgListBox" >
               <div v-for="(item,index) in scope.row.imgSrc"  :key="index">
                 <el-image 
                    class="imgCl" 
                    :src="item" 
                    :preview-src-list="[item]" 
                    >
                 </el-image>
               </div>
             </div>
           </template>
         </el-table-column>
      </public-table>
  </div>
</template>

<script>
import publicTable from "@/components/public/publicTable.vue"
import *as API from "@api/operate.js"
export default {
  components: {
         publicTable
  },
  data() {
    return {
        pageNum:1,
        pageSize:100,
        total:0,
        ruleForm:{
           page:1,
           size:100,
           no:null,
           createTime:null,
           status:null
        }, 
        columnDefs :[
            {headerName: '提交时间', field: 'createtime',width:180},
            {headerName: '联系人', field: 'contacts',width:90},
            {headerName: '联系电话', field: 'phone',width:119},
            {headerName: '描述', field: 'description',width:430},
        ],
        tableData: [],
        imgList:[],
        srcList: []
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
   changePage(pageSize,pageNum){
          this.pageSize=pageSize;this.pageNum=pageNum
          this.init()
    },
    async init(){
      let params = {page:this.pageNum,size:this.pageSize}
      await API.checkproposal(params).then(res=>{
        this.tableData = res.Data
        res.Data.records.forEach(item => {
          let boxList = item.pics.split(",");
          item.imgSrc=boxList
        });
      })
    }

  },
  created() {
    this.init()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="less">
#publicTableProposal{
  position: absolute;
}
</style>

<style lang='less' scoped>
#shoperCss{
     .imgListBox{
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
   }
   .imgCl{
     height: 50px;
     width: 50px;
     margin: 10px 10px 0 0 ;
     object-fit: contain;
   }
       .boxItem{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .demo-form-inline{
        align-items: center;
      }
      .itemp{
      font-size: 16px;
      } 
    } 
}

</style>